<template>
	<div class="wrapper height100">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="banklist wrapbd">
			<ul>
				<li v-for="(item,index) in bank" :key="index">
					<span class="iscard left">
						<i class="fa fa-lg" :class="{' fa-circle-thin bi' : item.is_default == 0,'fa-dot-circle-o ai' : item.is_default == 1}" aria-hidden="true" @click="setBankCard(item.id)"></i>
                        <div class="ts"><img src="./../../assets/img/bank.png"></div>
                        <span>{{item.bank_name}}<br><p>{{item.bank_no}}</p></span></span>
					<span class="right"><i class="fa fa-trash fa-lg" aria-hidden="true" @click="deleteBankCard(item.id)"></i></span>
				</li>
			</ul>
            <cell-group>
                <cell title="添加银行卡" is-link url='#/addBankcard' />
            </cell-group>			
		</div>
	</div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";
    import { Cell, CellGroup, Dialog } from 'vant';
	export default {
		data(){
			return {
				headText: '银行卡',  //顶部标题
				bank:{},
			}
		},
		mounted(){
            this.initialize() //拉取银行卡信息
		},
		methods:{
			//返回
			onClickLeft () { this.$router.push('/bankCard');},
			//获取银行卡信息
			initialize(){
				var _this = this;
				this.Tools.AXIOS({
                    url: 'bank/list',
                    success: function (res) {
                       _this.bank = res.data.data.list;
                    }
                })
			},
			//删除银行卡
			deleteBankCard(id){
				let _this = this;
				Dialog.confirm({
                title: '温馨提示',
                message: '确定删除银行卡？'
                }).then(() => {
					this.Tools.AXIOS({
	                    url: 'bank/del',
	                    transformRequest: {
	                        id : id,    //开户行ID
	                    },
	                    success: function (res) {
	                        _this.$toast.success('已删除');
	                        _this.initialize() //重新拉取银行卡信息
		                },error(){}
	                })
                });
			},
			//设为默认值
			setBankCard(id){
				let _this = this;
				this.Tools.AXIOS({
					url: 'bank/setdefault',
					transformRequest: {
						id : id,    //开户行ID
					},
					success: function (res) {
						_this.initialize() //重新拉取银行卡信息
					},error(){}
				})
			}
		},
		components: {
            HeadTitle,
            Cell,
			CellGroup,
			Dialog
		},
	}
</script>
<style scoped>
.banklist{ background-color: #fff; }
.banklist li{ width: 90%; overflow: hidden; padding: .5rem 0; margin: 0 auto; border-bottom: 1px solid #F4F4F4;}
.banklist li:last-child{ border-bottom:none;}
.banklist li .iscard{ width: 90%; display: flex;}
.banklist li .iscard i{ margin-top: .3rem;}.ai{ color: #e64817;}.bi{ color: #666;}
.banklist li .iscard span{ font-size: .35rem; margin-left: .5rem;}
.banklist li .iscard span label{ font-size: 1rem; color: #666; margin-left: 5px;}
.banklist li .iscard .ts{ width: 10%; overflow: hidden; margin: .1rem 0 0 .5rem;}
.banklist li .iscard .ts img{ width: 100%;}
.banklist li .iscard p{ font-size: .35rem;}
.banklist li span:nth-of-type(2){ color: #999; margin-top: .2rem;}
</style>